import React, { useState } from 'react';
import { useDrop } from 'react-dnd';
import styles from './styles.module.less';

export default ({ onTarget, renderItem, accept }) => {
    const [items, setItems] = useState([]);

    const [{}, drag] = useDrop({
        accept,
        drop(item, monitor) {
            onTarget && onTarget(items);
            const p = monitor.getClientOffset();
            items.push({ ...item, left: p.x, top: p.y });
            setItems(items);
        },
        collect: (monitor) => {
            return {
                isOver: monitor.isOver(),
                canDrop: monitor.canDrop(),
                position: monitor.getClientOffset()
            };
        }
    });
    return (
        <div ref={ drag } className={ styles.dropContainer }>
            {
                items.map((i, idx) => renderItem({ ...i, key: idx }))
            }
        </div>
    );
}